<script setup lang="ts">
import { ref } from 'vue'
import type { IHomeHospitalLevelArr } from '@/service/modules/home/type'

interface IProps {
  title: string
  tabContentArr?: IHomeHospitalLevelArr
}
defineProps<IProps>()
const currentVal = ref<string>('')

const emit = defineEmits(['changeTabClick'])

// 点击事件
const changeTabClick = (value: string) => {
  currentVal.value = value
  emit('changeTabClick')
}

defineExpose({
  currentVal
})
</script>
<template>
  <div class="tabcate">
    <div class="tabname">{{ title }} :</div>
    <ul class="tabnav">
      <li @click="changeTabClick('')" :class="{ selected: currentVal == '' }">
        全部
      </li>
      <li
        v-for="item in tabContentArr"
        :key="item.id"
        @click="changeTabClick(item.value)"
        :class="{ selected: currentVal == item.value }"
      >
        {{ item?.name }}
      </li>
    </ul>
  </div>
</template>
<style scoped lang="less">
.tabcate {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 12px;

  .tabname {
    color: #999;
  }

  ul.tabnav {
    flex: 1;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 15px;

    li {
      margin-right: 15px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover {
        color: var(--primary-color);
      }

      &.selected {
        color: var(--primary-color);
        font-weight: 900;
      }
    }
  }
}
</style>
